<template>
  <div>
    <headNav title=""></headNav>
    <div class="p-div">
      <div style="width: 100%; height: 8.3rem; background: #0085DE;" >
         <img src="@/assets/img/my/invitationImgs.png" mode="" style="max-width: 100%; " >
         <div class="content">【怎么推荐】
  点击活动页“加入志愿者”按钮，您就可以获得“骆米志愿者证书”，并创建自己的“公益基金”账户，选择二维码或保存图片方式，通过微信等渠道分享给家长或同事
 
【怎么领补贴】
  点击“一起做公益”进入个人“公益基金”，查看“公益明细”，点击“申请提现”便能将公益补贴提现到您的支付宝、微信钱包
 
【推荐越多补贴越多】
1、通过我的-我的班级-邀请家长功能，每邀请一位用户并开通学生证套餐，您就能获得30元补贴 
2、您邀请的同事也加入志愿者，他每邀请一位新的用户开通套餐，您就能获得10元补贴
3、您个人或者您朋友邀请开通的用户越多，您能获得的补贴越多
         </div>
      </div>
      <div class="establishCss" style="font-size: 0.26rem; margin: 0.3rem;" v-if="!buttonX" >
        <check-icon :value.sync="demo1"> 我自愿加入并推广骆米教育公益事业</check-icon>
      </div>
      <div class="flexCenter" style="margin-top: 0.8rem;" >
        <button type="default" @click="yesClick" v-if="!buttonX" >确认加入</button>
        <button type="default" v-else  style="background: red;" @click="$router.push('certificate')" >查看公益证书</button>
        <button type="default" style="background: #FF9900; margin-left: 0.3rem;" @click="colleagueClick" >推荐同事加入</button>
      </div>
    </div>

  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { putPublicWelfareApi, teacherDirectoryApi } from '@/api/myNewApi'
import { CheckIcon } from 'vux'
export default {
  components: {
    headNav,
    CheckIcon
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode
    })
  },
  data () {
    return {
      demo1: false,
      buttonX: false
    }
  },
  methods: {
    // 点击推荐同事触发事件
    async colleagueClick () {
     this.$router.push('colleague')
    },
    async yesClick () {
      if (this.demo1) {
        this.$vux.confirm.show({
            title: '提示',
            content: '是否确认加入公益政策？',
            onConfirm : async () => {
              await putPublicWelfareApi()
              this.buttonX = true
            },
            onCancel () {
            }
        })
      } else {
        this.$vux.toast.text('请先同意公益条款', 'middle')
      }
    }
  },
  async mounted() {
    let res = await teacherDirectoryApi()
    res.isBenefitUser ? this.buttonX = true : this.buttonX = false
  }
}
</script>

<style lang="less" scoped>

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  button {
    width: 3rem;
    height: 0.85rem;
    border-radius: 0.4rem;
    background: #128AEF;
    color: #FFF;
    font-size: 0.32rem;
    border: 0;
  }
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}
.content{
     position: absolute;
    top: 2.2rem;
    left: 2rem;
    width: 3.5rem;
    white-space: pre-wrap;
    height: 5rem;
    overflow-y: scroll;
    font-size: 0.28rem;
    line-height: 0.5rem;

}
.p-div{
  position: relative;
}
</style>
<style>
.establishCss .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
  color: #128FEF!important;
}
</style>
